<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交订单-青鸟商城</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/order.css">
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/js/common.js"></script>
    <script src="./assets/layer/layer.js"></script>
    <!-- 
        商品素材来自京东
        https://new.jd.com/?innerAnchor=100011386594_100012254352_100006378137_100011529848&focus=1 
    -->
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="./list.html">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">每日特价</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./reg.html">注册</a></li>
                </ul>

            </div>
        </div>
    </nav>

    <div class="container order">

        <form>
            <div class="form-group">
                <label for="consingee">选择收货信息</label>
                <!-- 如果已经添加收货地址, 则选择 -->
                <select class="form-control receive-option">
                    <option value="">--请选择收货地址--</option>
                    <option value="1">张三-18710950888</option>
                    <option value="2">李四-18629687777</option>

                </select>
                <!-- 否则新增收货地址 -->
                <!-- <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    新增收货地址
                </button> -->
            </div>
            <hr/>
            <div class="receive-info">
                <div class="form-group">
                    <label for="consingee">收货人</label>
                    <input type="email" class="form-control" id="consingee" placeholder="收货人">
                </div>
                <div class="form-group">
                    <label for="tel">联系电话</label>
                    <input type="password" class="form-control" id="tel" placeholder="联系电话">
                </div>
                <div class="form-group city3">
                    <label for="province">收货地址</label>
                    <select name="province" id="province" class="form-control">
                        <option value="">--请选择省份--</option>
                    </select>
                    <select name="city" id="city" class="form-control">
                        <option value="">--请选择城市--</option>
                    </select>
                    <select name="county" id="county" class="form-control">
                        <option value="">--请选择区县--</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="address">详细地址</label>
                    <input type="password" class="form-control" id="address" placeholder="详细地址">
                </div>
            </div>
            <div class="form-group">
                <label for="tel">支付方式</label>
                <button type="button" class="pay-way">货到付款</button>
                <button type="button" class="pay-way">在线支付</button>
            </div>
            <div class="form-group clearfix">
                <button type="button" class="btn btn-danger btn-lg btn-order pull-right">立即下单</button>
            </div>
        </form>
    </div>


    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>

    <div class="fixed-nav-right">
        <!-- 返回首页 -->
        <div class="fixed-home">
            <a href="./index.html">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <!-- 购物车 -->
        <div class="fixed-cart">
            <a href="./cart.html">
                <i class="glyphicon glyphicon-shopping-cart"></i>
            </a>
        </div>
        <!-- 返回顶部 -->
        <div class="back-top">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
    </div>



    <!-- 新增编辑模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增收货地址</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="receiver">收货人</label>
                        <input type="text" class="form-control" id="receiver" placeholder="收货人">
                    </div>
                    <div class="form-group">
                        <label for="mobile">联系电话</label>
                        <input type="text" class="form-control" id="mobile" placeholder="联系电话">
                    </div>
                    <div class="form-group city3">
                        <label for="province">收货地址</label>
                        <select id="province" name="province" class="form-control">
                            <option value="">--请选择省份--</option>
                        </select>
                        <select id="city" name="city" class="form-control">
                            <option value="">--请选择城市--</option>
                        </select>
                        <select id="county" name="county" class="form-control">
                            <option value="">--请选择区县--</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="addr">详细地址</label>
                        <input type="text" class="form-control" id="addr" placeholder="详细地址">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger">确认保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 -->

</body>
<script src="./assets/js/city-data.js"></script>
<script src="./assets/js/addr.js"></script>
<script>
    // 初始化省市区三级联动
    cityInit(res=>{
        console.log(res);
    });
    // 选择收货信息
    $(".receive-option").on('change',function(){
        $(".receive-info").show();
    });
    // 付款方式
    $(".pay-way").on('click',function(){
        $(".pay-way").removeClass('plain-active');
        $(this).addClass('plain-active');
    })
   
</script>

</html>